<template>
  <div>
    <div id="orderPlot" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import orderApi from '../../../api/cby/order.js'

  export default {
    name: 'orderPlot',
    components: {

    },
    mounted() {
      this.getPlotData()
    },
    data() {
      return {
        xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        ydata: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
      }
    },
    methods: {
      plot(xdata, ydata,max,min) {
        var chartDom = document.getElementById('orderPlot');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            left: 'center',
            text: 'Line-Bar Chart'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          legend: {
            data: ['OrderNum', 'OrderNum']
          },
          xAxis: [{
            type: 'category',
            data: xdata,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
              type: 'value',
              name: 'OrderNum',
              min: min,
              max: max,
              interval: (max-min)/5,
              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              type: 'value',
              name: 'OrderNum',
              min: min,
              max: max,
              interval: (max-min)/5,
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series: [{
              name: 'bar',
              type: 'bar',
              data: ydata
            },
            {
              name: 'line',
              type: 'line',
              yAxisIndex: 1,
              data: ydata
            }
          ]
        };
        option && myChart.setOption(option);
      },
      // 获取绘图数据
      getPlotData() {
        orderApi.getPlotData()
          .then((response) => {
            // console.log(response)
            this.xdata = response.data.xdata;
            this.ydata = response.data.ydata;
            this.max = response.data.max;
            this.min = response.data.min;
            this.plot(this.xdata, this.ydata,this.max,this.min)
          })
          .catch((error) => {
            console.log(error);
          });
      }
    }
  }
</script>

<style>
</style>
